<template>
	<div class="bookBorrowTime">
		<div class="bookInfoInner flex align-center justify-around marginAuto">
			<div class="bookInfoInnerLeft flex-direction align-center flex">
				<img class="bookInfoInnerLeftImg" src="../../assets/image/backimg.jpg">
				<div class="bookInfoInnerLeftBookName flex align-center justify-between">
					<div>书名 </div>
					<div style="font-size: 18px;">作者</div>
				</div>
			</div>
			<div class="bookInfoInnerRight">
				<div class="bookInfoInnerRightjieyue">
					借阅时间：
					<el-date-picker v-model="startTime" type="date" placeholder="选择借阅时间" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div class="bookInfoInnerRightjieyue">
					还书时间：
					<el-date-picker v-model="endTime" type="date" placeholder="选择还书时间" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</div>
		</div>
		<div class="flex align-center justify-around">
			<el-button class="jieyuebtn marginAuto" type="primary" style="color: #FFFFFF;">确认</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'bookBorrowTime',
		data() {
			return {
				startTime: '',
				endTime: '',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					},
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.bookBorrowTime {
		.jieyuebtn {
			width: 300px;
			height: 50px;
			font-size: 20px;
		}

		flex: 1;
		height: 100%;

		.bookInfoInner {
			width: 1200px;
			height: 500px;

			.bookInfoInnerLeft {
				width: 360px;
				height: 330px;

				.bookInfoInnerLeftImg {
					width: 300px;
					height: 180px;
					margin-top: 20px;
				}

				.bookInfoInnerLeftBookName {
					width: 300px;
					margin: 50px;
					font-size: 26px;
					color: #333333;
				}
			}

			.bookInfoInnerRight {
				width: 660px;
				height: 330px;

				.bookInfoInnerRightjieyue {
					margin-top: 50px;
					font-size: 20px;
					color: #333333;
				}

				.bookInfoInnerRightDesc {
					width: 660px;
					height: 200px;
					font-size: 16px;
					color: #303133;
					word-wrap: break-word;
				}
			}
		}
	}
</style>
